<template>
  <div class="cs-page-container">
    <el-tabs v-model="activeTab" type="border-card" @tab-click="onTabClick">
      <el-tab-pane label="幸运礼物" name="tab1" :lazy="true">
        <keep-alive>
          <TabGift v-if="activeTab === 'tab1'" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="福气夺宝" name="tab2" :lazy="true">
        <keep-alive>
          <TabCard v-if="activeTab === 'tab2'" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="幸运转盘" name="tab3" :lazy="true">
        <keep-alive>
          <TabTurntable v-if="activeTab === 'tab3'" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="幸运扭蛋" name="tab4" :lazy="true">
        <keep-alive>
          <LuckyEgg v-if="activeTab === 'tab4'" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import TabGift from './components/TabGift'
import TabCard from './components/TabCard'
import TabTurntable from './components/turntable'
import LuckyEgg from './components/LuckyEgg'

export default {
  components: { TabGift, TabCard, TabTurntable, LuckyEgg },
  data() {
    return {
      activeTab: 'tab1'
    }
  },
  methods: {
    onTabClick(tab) {
      var e = new Event('resize_chart', { bubbles: true, cancelable: false })
      document.dispatchEvent(e)
    }
  }
}
</script>
